/** Object.defineProperty的返回值是接受的那个源对象
 * 然后我们后续操作的也是那个源对象
 * 因为Object.defineProperty会改变源对象本身*/
/*const o = {a:1,b:2}
const x = Object.defineProperty(o,'a',{
  get(){
    return 222
  }
})

console.log(o.a); //222
console.log(x); //{ a: [Getter], b: 2 }
console.log(x === o); //true*/


/** 而Proxy, 并不会改变源对象, 它会返回一个代理对象
 * 我们后续的所有操作应该使用这个代理对象 而不是 源对象*/
const o = {a:1,b:2}
const x = new Proxy(o,{
  get(target,key,receiver){
    console.log('target === o:',target === o); //target === o: true
    return 222
  }
})

console.log(o.a); //1
console.log(x === o); //false
console.log(x);
/*
Proxy {a: 1, b: 2}
  [[Handler]]: Object
    get: ƒ get()
    __proto__: Object
  [[Target]]: Object
    a: 1
    b: 2
  __proto__: Object
  [[IsRevoked]]: false
*/
console.log(x.a); //222
console.log(x.b); //222
console.log(x.c); //222
/** ↑ 即使该属性在源对象上不存在, 也能拿到值（就是我们get里返回的*/

/**
 * 另外:
 * 1. proxy一次就可以代理源对象的所有属性,甚至还没有的属性也可以被代理
 *    而defineProperty一次调用只能代理源对象上的一个属性
 *    So, 使用proxy我们不再需要循环遍历源对象然后依次调用defineProperty了
 *
 * 2. Proxy/handler 除了set和get两个选项, 还支持更多: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy
 * */
